<template>
    <el-row :gutter="24" style="margin-top:16px">
        <el-col :md="3" :sm="6" style="text-align: center;line-height: 32px;">{{ name }}</el-col>
        <el-col :md="12" :sm="16">
            <el-row :gutter="24">
                <el-col :sm="6">
                    <el-select v-model="data.width_height" :placeholder="$t('select_placeholder')" style="width: 100%;">
                        <el-option v-for="item in videoSizeOptions" :key="item.value" :label="item.label"
                            :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                </el-col>
                <el-col :sm="12">
                    <el-select v-model="data.codec_profile" :placeholder="$t('select_placeholder')" style="width: 100%;">
                        <el-option v-for="item in codecOptions" :key="item.value" :label="item.label" :value="item.value"
                            :disabled="item.disabled"></el-option>
                    </el-select>
                </el-col>
                <el-col :sm="6">
                    <el-select v-model="data.rcmode" :placeholder="$t('select_placeholder')" style="width: 100%;">
                        <el-option v-for="item in rcmodeOptions" :key="item.value" :label="item.label" :value="item.value"
                            :disabled="item.disabled"></el-option>
                    </el-select>
                </el-col>
            </el-row>
        </el-col>
        <el-col :md="3" :sm="6">
            <el-input v-model="data.bitrate" :placeholder="$t('input_placeholder')"></el-input>
        </el-col>
        <el-col :md="3" :sm="6">
            <el-input v-model="data.framerate" :placeholder="$t('input_placeholder')"></el-input>
        </el-col>
        <el-col :md="3" :sm="6">
            <el-input v-model="data.gop" :placeholder="$t('input_placeholder')"></el-input>
        </el-col>
    </el-row>
</template>
  
<script setup name="video-stream">
const props = defineProps(['name', 'data', 'videoSizeOptions', 'codecOptions', 'rcmodeOptions'])
let name = ref('')
let data = reactive({})
let videoSizeOptions = ref([])
let codecOptions = ref([])
let rcmodeOptions = ref([])
watchEffect(() => {
    name.value = props.name
    data = props.data
    videoSizeOptions.value = props.videoSizeOptions
    codecOptions.value = props.codecOptions
    rcmodeOptions.value = props.rcmodeOptions
})
onUnmounted(() => {

});

</script>
  
<style scoped lang="scss">
.encode-setting {}
</style>
  
  